*{
  box-sizing: border-box;
}

/* Scroll Bar Style */
/* width */
::-webkit-scrollbar {
  width: 0.625rem;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: rgb(40, 167, 69); 
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgb(106, 223, 120); 
}

/* Base Styles */
body{
  margin: 0;
  padding: 0;
  font-family: 'Bebas Neue', cursive;
  background-color: rgb(25,25,25);
}

main{
  overflow-x: hidden;
}

a{
  text-decoration: none;
  color: #fff;
}

.nav-link:visited,
a:visited{
  color: #fff;
}

.nav-link:hover, a:hover{
  color: rgb(40, 167, 69);
}


/* Overlay */
.overlay{
  display: none;
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: rgba(25,25,25,0.8);
  overflow-y: hidden;
  z-index: 4;
}

.container{
  position: inherit;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  height: 31.25rem;
  width: fit-content;
}

.close{
  transform: translateX(1rem);
  padding: 0.313rem;
  font-size: 2.5rem;
  color: rgb(255, 0, 0);
}

.close:hover{
  cursor: pointer;
}

.overlay img:hover{
  cursor: pointer;
}

.user-movie-series-display{
  height: inherit;
  padding: 0.125rem;
  color: #fff;
  background: rgba( 255, 255, 255, 0.4 );
  backdrop-filter: blur( 4px );
  -webkit-backdrop-filter: blur( 4px );
  border-radius: 10px;
  overflow-x: hidden;
  overflow-y: scroll;
}

.user-movie-series-display h1{
  margin-top: 0.313rem;
  text-align: center;
  font-size: 2.5rem;
}

.user-movie-series-display .card{
  width: 10rem;
}

/* Navbar Container & Elements */

.nav-item a {
  font-size: 1.563rem;
  margin: 0 0.938rem;
  color: #fff;
}
.search-container{
  margin: 0 6.25rem;
}

.error{
  margin: 0 0.313rem;
  padding: 0.125rem 0.313rem;
  border-radius: 50px;
  font-size: 1.5rem;
  background-color: rgba(255, 0, 0,0.5);
  color: #fff;
}

/* Navbar ID Selectors */
#navagation-bar{
  position: fixed;
  width: 100%;
  background-color: rgba(25,25,25,0.5);
  z-index: 2;
}

#search-box{
  width: 28.125rem;
}

/* Image Carousel Section */

.carousel-item, 
.carousel-item img {
  height: 62.5rem;
}

.carousel-item{
  background-color: rgb(25,25,25);
}

.carousel-item img{
  object-fit:contain;
}

/*  Popular Movies & TV Series Section */
.movies_series{
  display: flex;
  justify-content: center;
  margin: 6.25rem 0;
}

.movie_series_wrap h1{
  transform: translateX(3.5rem);
}

.movie_series_wrap aside{
  display: grid;
  margin: 1.563rem;
  grid-template-columns: .1fr .1fr .1fr .1fr .1fr;
  grid-template-rows: max-content;
  row-gap: 1em;
  padding: 0 0.313rem;
}


.movie_series_wrap aside .card{
  margin: 0 25px;
  width: 10rem;
  background-color: rgb(13,13,13);
}

.movie_series_wrap .card:hover, 
.slide-wrap .card:hover{
  cursor: pointer;
}

.movie_series_wrap .card img, 
.slide-wrap .card img{
  height: 25rem;
  width: auto;
}

.movie_series_wrap .card-body,
.slide-wrap .card-body {
  text-align: center;
  font-size: 1.25rem;
}

.movie_series_wrap .card-body a,
.slide-wrap .card-body a {
  color: rgb(40, 167, 69);
  text-decoration: none;
}

.movie_series_wrap .card-body a:hover, 
.slide-wrap .card-body a:hover{
    color: rgb(248,248,255)
}

/* Media Query */
    /* Media Query for Mobile Devices */
    @media (max-width: 481px) {
      .error{
        position: absolute;
        top: 0.02rem;
        font-size: 1.5rem;
      }

      .container{
        height: auto;
        width: 100vw;
      }
      
      .user-movie-series-display h1{
        text-align: center;
        font-size: 2rem;
      }

      .slide-wrap{
        height: auto;
        width: 100vw;
      }

      .slide-wrap{
        overflow-x: scroll;
      }
      
      .slide-wrap aside{
        display: flex;
        height: inherit;
        width:max-content;
        padding: 0.313rem;
      }

      .slide-wrap .card, 
      .slide-wrap .card-body{
        width: 18rem;
      }

      .slide-wrap .card{
        margin: 0 10px;
        background-color: rgb(13,13,13);
    }
  
      .slide-wrap h1{
        margin: 0.938rem 0.938rem;
      }

      #movie_series_results{
        height: auto;
        width: max-content;
      }

      .carousel-item, 
      .carousel-item img {
        height: auto;
      }

      .search-container{
        transform: translate(-5.5em);
      }

      #search-box{
        width: 12.5rem;
      }

      .movies_series h1{
        font-size: 2.188rem;
      }
 
  }
    
  /* Media Query for low resolution  Tablets, Ipads */
  @media (min-width: 481px) and (max-width: 767px) {
    
  }
    
  /* Media Query for Tablets Ipads portrait mode */
  @media (min-width: 768px) and (max-width: 1024px){
    .carousel-item, 
    .carousel-item img {
      height: 30rem;
    }

    .movie_series_wrap aside{
      display: grid;
      height: inherit;
      justify-content: center;
      width: 25rem;
      padding: 0.313rem;
      grid-template-columns: .05fr .05fr;
      row-gap: 0.7em;
    }

    .movie_series_wrap h1{
      left: 10%;
      font-size: 2.813rem;
    }

  }
    /* Media Query for Laptops and Desktops */
    @media (min-width: 1025px) and (max-width: 1280px){      
      
  }
    
  /* Media Query for Large screens */
  @media (min-width: 1281px) {

    .movie_series_wrap h1{
      left: 16%;
    }

    .user-movie-series-display .card, 
    .movie_series_wrap aside .card{
      width: 10rem;
    }
    .card-body{
      font-size: 1.5rem;
    }
  }